<template>
  <uni-popup
    type="bottom"
    class="select-visit-time-popup"
    ref="popup"
    :mask-click="false"
  >
    <view class="header f jc-sb">
      <text>选择上门时间</text>
      <uni-icons type="close" size="30" @click="closePopup"></uni-icons>
    </view>
    <view class="body f f1 fd-row">
      <uni-segmented-control
        :current="current"
        :values="items"
        @clickItem="onClickItem"
        styleType="button"
        activeColor="#fff"
        class="s-segmented-control fd-col"
      ></uni-segmented-control>
      <view class="content">
        <view v-show="current === 0">
          <van-button
            v-for="(item, index) in todayContentData"
            :key="item.text"
            :disabled="!item.status"
            @click="buttonClick('today', index)"
            class="f ai-c"
            size="large"
            style="height: 80rpx; border-bottom: 1px solid #ccc"
          >
            <text style="display: flex; align-items: center">{{
              item.text
            }}</text>
            <uni-icons
              v-if="
                index === todayIndex &&
                postnatalIndex === -1 &&
                nextDayIndex === -1
              "
              type="checkbox-filled"
              size="30"
              style="color: #24adf3"
            ></uni-icons>
            <text v-else-if="!item.status">已过期</text>
          </van-button>
        </view>
        <view v-show="current === 1">
          <van-button
            v-for="(item, index) in contentData"
            :key="item.text"
            @click="buttonClick('tomorrow', index)"
            class="f ai-c"
            size="large"
            style="height: 80rpx; border-bottom: 1px solid #ccc"
          >
            <text style="display: flex; align-items: center">{{
              item.text
            }}</text>
            <uni-icons
              v-show="index === nextDayIndex && postnatalIndex === -1"
              type="checkbox-filled"
              size="30"
              style="color: #24adf3"
            ></uni-icons>
          </van-button>
        </view>
        <view v-show="current === 2">
          <van-button
            v-for="(item, index) in contentData"
            @click="buttonClick('postnatal', index)"
            :key="item.text"
            class="f ai-c"
            size="large"
            style="height: 80rpx; border-bottom: 1px solid #ccc"
          >
            <text style="display: flex; align-items: center">{{
              item.text
            }}</text>
            <uni-icons
              v-show="index === postnatalIndex"
              type="checkbox-filled"
              size="30"
              style="color: #24adf3"
            ></uni-icons>
          </van-button>
        </view>
      </view>
    </view>
  </uni-popup>
</template>

<script>
import { ref, computed } from "vue";
import selectVisitTimeHelper from "/utils/select-visit-time-helper";
export default {
  name: "select-visit-time-popup",
  emits: ["getSelectVisitTime"],
  setup(prop, { emit }) {
    const popup = ref(null);
    const current = ref(0);
    const items = ref(["今天", "明天", "后天"]);
    const todayIndex = ref(-1);
    const nextDayIndex = ref(-1);
    const postnatalIndex = ref(-1);
    const contentData = ref([
      { text: "09:00 - 11:00", status: false },
      { text: "11:00 - 13:00", status: false },
      { text: "13:00 - 15:00", status: false },
      { text: "15:00 - 17:00", status: false },
      { text: "17:00 - 19:00", status: false },
    ]);
    const selectVisitTime = ref("");
    const todayContentData = computed(() => {
      return selectVisitTimeHelper(Object.assign([], contentData.value));
    });
    const onClickItem = ({ currentIndex }) => {
      current.value = currentIndex;
    };
    const buttonClick = (dayType, index) => {
      if (dayType === "today") {
        todayIndex.value = index;
        nextDayIndex.value = -1;
        postnatalIndex.value = -1;
        selectVisitTime.value = `今天 ${todayContentData.value[index].text}`;
      } else if (dayType === "tomorrow") {
        postnatalIndex.value = -1;
        nextDayIndex.value = index;
        selectVisitTime.value = `明天 ${contentData.value[index].text}`;
      } else {
        postnatalIndex.value = index;
        selectVisitTime.value = `后天 ${contentData.value[index].text}`;
      }
    };
    const openPopup = () => {
      popup.value.open();
    };
    const closePopup = () => {
      emit("getSelectVisitTime", selectVisitTime.value);
      popup.value.close();
    };
    return {
      popup,
      current,
      items,
      todayIndex,
      nextDayIndex,
      postnatalIndex,
      contentData,
      todayContentData,
      onClickItem,
      buttonClick,
      openPopup,
      closePopup,
    };
  },
};
</script>
<style lang='scss' scoped>
.select-visit-time-popup {
  width: 100%;
  ::v-deep uni-view[name="content"] {
    display: flex;
    flex-direction: column;
    padding: 40rpx;
    padding-bottom: 96rpx !important;
    width: 100%;
    height: 800rpx;
    box-sizing: border-box;
    background: #fff !important;
    border-radius: 40rpx 40rpx 0 0;
    .uni-popup__wrapper.bottom {
      display: flex;
      flex: 1;
      flex-direction: column;
    }
  }
  .body {
    margin-top: 40rpx;
    .s-segmented-control {
      width: 200rpx;
      height: 100% !important;
      flex-direction: column !important;
      ::v-deep .segmented-control__item--button {
        height: 80rpx;
        flex: initial;
        border: 0;
        background-color: #f6f6f6 !important;
        .segmented-control__text {
          color: #000 !important;
        }
      }
      ::v-deep .segmented-control__item--button--active {
        background-color: #fff !important;
      }
    }
    ::v-deep .content {
      margin-left: 20rpx;
      flex: 1;
      .van-button {
        border: 0 !important;
        &.van-button--disabled {
          color: #000;
        }
        .van-button__content {
          display: flex;
          flex: 1;
          padding: 0;
          .van-button__text {
            display: flex;
            flex: 1;
            justify-content: space-between;
          }
        }
      }
    }
  }
}
</style>